<template>
  <div>
    <div class="haeder">
      <div>
        <el-popover placement="right" width="400" trigger="click">
          <!-- 新增对话框 -->
          <div class="addlist">
            <h4>新增用户</h4>
            <label for="">姓名</label>
            <input type="text" placeholder="请输入姓名" v-model="inputName">
            <br>
            <label for="">年龄</label>
            <input type="text" placeholder="请输入年龄" v-model="inputage">
            <br>
            <label for="">性别</label>
            <span>男</span>
            <input type="radio" name="sex" value="男" class="sex" v-model="inputsex">
            <span>女</span>
            <input type="radio" name="sex" value="女" class="sex" v-model="inputsex">
            <br>
            <label for="">出生日期</label>
            <input type="text" v-model="value1" placeholder="请输入出生日期 格式y-m-d" class="data">
            <br>
            <label for="">地址</label>
            <input type="text" placeholder="请输入地址" v-model="inputaddress">
            <br>
            <div class="button">
              <button @click="cancel">取消 <i class="el-icon-close"></i></button>
              <button @click="confirm" :plain="true">确定 <i class="el-icon-check"></i></button>
            </div>
          </div>
          <el-button slot="reference" class="add">+新增</el-button>
        </el-popover>
      </div>
      <div class="search">
        <input type="text" placeholder="请输入姓名" v-model="search">
        <button @click="searchB">搜索</button>
      </div>
    </div>
    <!-- 中间展示的表单 -->
    <el-table :data="showData" stripe style="width: 100%" height="550px">
      <el-table-column label="姓名" width="200">
        <template slot-scope="scope">
          <span style="margin-left: 0px">{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="年龄" width="200">
        <template slot-scope="scope">
          <span style="margin-left: 0px">{{ scope.row.age }}</span>
        </template>
      </el-table-column>
      <el-table-column label="性别" width="200">
        <template slot-scope="scope">
          <span style="margin-left: 0px">{{ scope.row.sex }}</span>
        </template>
      </el-table-column>
      <el-table-column label="日期" width="250">
        <template slot-scope="scope">
          <span style="margin-left: 0px">{{ scope.row.date }}</span>
        </template>
      </el-table-column>
      <el-table-column label="地址" width="250">
        <template slot-scope="scope">
          <span style="margin-left: 0px">{{ scope.row.address }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <!-- 编辑对话框 -->
          <el-popover placement="left" trigger="click" popper-class="down-popper">
            <el-tooltip class="item" effect="dark" content="用户姓名" placement="top">
              <el-input v-model="editList.name" placeholder="请输入内容" clearable></el-input>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="用户年龄" placement="top">
              <el-input v-model="editList.age" placeholder="请输入内容"></el-input>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="用户性别" placement="top">
              <el-radio-group v-model="editList.sex">
                <el-radio label="男"></el-radio>
                <el-radio label="女"></el-radio>
              </el-radio-group>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="用户出生日期" placement="top">
              <el-input v-model="editList.date" placeholder="请输入内容"></el-input>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="用户地址" placement="top">
              <el-input v-model="editList.address" placeholder="请输入内容"></el-input>
            </el-tooltip>
            <button @click="save" class="keep">保存</button>
            <!-- 编辑按钮 -->
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)" slot="reference">编辑</el-button>
          </el-popover>

          <!-- 删除按钮 -->
          <el-button size="mini" type="danger" @click="deletelist(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <sorter :user="tableData" @showList="showList"></sorter>
  </div>
</template>

<script>
import sorter from '../components/sorter.vue'
import adduser from '../js/adduser'
export default {
  data() {
    return {
      tableData: [
      ],
      //展示的数据
      showData: [],
      value1: '',
      inputName: '',
      inputage: '',
      inputsex: '',
      inputaddress: '',
      id: adduser.length,
      //搜索值
      search: '',
      //搜索后的数组
      arr: [],
      //编辑按钮
      visibe: false,
      editList: [],
    }
  },
  //计算属性
  computed: {

  },
  //监听
  watch: {
    search() {
      this.tableData = this.$store.state.userList

    },
  },
  //方法
  methods: {
    userlist(val) {
      this.showData = val
    },
    // 搜索操作
    showList(val) {
      this.showData = val
    },
    // 编辑
    handleEdit(index, row) {
      for (let index = 0; index < this.tableData.length; index++) {
        if (this.$store.state.userList[index].id == row.id) {
          this.editList = this.$store.state.userList[index]
        }
      }
    },
    // 编辑用户保存信息
    save() {
      if (this.editList.date == '') {
        this.$message({
          message: '请输入出生日期',
          type: 'warning'
        });
      } else if (this.editList.name == '') {
        this.$message({
          message: '请输入姓名',
          type: 'warning'
        });
      } else if (this.editList.age == '' || Number(this.editList.age) < 0 || Number(this.editList.age) > 100) {
        this.$message({
          message: '请输入年龄',
          type: 'warning'
        });
      } else if (this.editList.sex == '') {
        this.$message({
          message: '请选择性别',
          type: 'warning'
        });
      } else if (this.editList.address == '') {
        this.$message({
          message: '请输入地址',
          type: 'warning'
        });
      } else {
        this.$store.dispatch('AceditList', this.editList)
        this.$message({
          message: '编辑成功!',
          type: 'success'
        });
      }
    },
    // 删除
    deletelist(index, row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.search = ''
        this.$store.dispatch('Acdeleteuserlist', row.id)
          this.tableData = this.$store.state.userList
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    },
    // 增加用户列表按钮
    confirm() {
      let obj = {
        id: this.id++,
        age: this.inputage,
        sex: this.inputsex,
        name: this.inputName,
        date: this.value1,
        address: this.inputaddress
      }
      if (this.inputage !== '' && this.inputsex !== '' && this.inputName !== '' && this.value1 !== '' && this.inputaddress !== '') {
        this.$store.dispatch('Acuserlist', obj)
        // 强制页面刷新
        // this.$forceUpdate()
        this.$message({
          message: '添加成功!',
          type: 'success'
        });
      } else {
        alert('请先填写相应信息')
      }
    },
    // 取消按钮
    cancel() {
      this.inputage = '',
        this.inputsex = '',
        this.inputName = '',
        this.value1 = '',
        this.inputaddress = ''
    },
    //搜索
    searchB() {
      if (this.search !== '') {
        this.tableData = this.tableData.filter((p) => {
          return p.name.includes(this.search) == true
        })
      } else {
        alert('请先输入姓名')
      }
    }
  },
  //组件
  components: {
    sorter,
  },
  // 生命周期
  mounted() {
  },
  created() {
    // 接受要在本页渲染的数据
    /* bus.$on('userlist', (val) => {
      this.showData = val
    }), */
    // 一进入页面拿到userlist
    this.tableData = this.$store.state.userList
  }
}
</script>
<style lang="less">
.down-popper {
  width: 800px;
  height: 50px;
  display: flex;
  justify-content: space-between;
}
</style>
<style lang="less" scoped>
.keep {
  background-color: rgb(86, 115, 196);
  border: 0;
  color: #FFFFFF;
  font-size: 10px;
  width: 60px;
  height: 35px;
  margin: auto;
}

.keep:hover {
  background-color: rgba(86, 115, 196, 0.808);
}

.el-input {
  margin-right: 10px;
  line-height: 50px;
  // padding: 20px;
  width: 150px;
  height: 30px;
}

.el-radio-group {
  line-height: 60px;

  .el-radio {
    margin-right: 10px;
  }
}


.el-table {
  margin-top: 20px;
}

.el-pagination {
  margin: 5px auto;
  text-align: right;
  background-color: #FFFFFF;
  height: 15vh;
  outline: 1px solid #EBEEF5;
}

.el-popover {
  .addlist {
    h4 {
      color: black;
      font-size: 20px;
      font-weight: 300;
      line-height: 20px;
    }

    label {
      font-size: 15px;
      line-height: 50px;
      color: #606266;
    }

    input {
      line-height: 50px;
      margin-left: 50px;
      width: 200px;
      height: 25px;
      border: 1px solid #EBEEF5;
      border-radius: 2px;
    }

    span {
      font-size: 15px;
      margin-left: 50px;
      color: #606266;
    }

    .data {
      margin-left: 20px;
    }

    .sex {
      width: 15px;
      height: 15px;
      margin-left: 20px;
    }


    .button {
      // outline: 1px solid black;
      width: 160px;
      margin-left: 200px;

      button {
        margin-left: 20px;
        width: 60px;
        height: 30px;
        border: 0;
        border-radius: 2px;
        background-color: rgb(86, 115, 196);
        color: white;
      }

      button:hover {
        background-color: rgb(109, 141, 230);
      }
    }
  }
}

.haeder {
  width: 85vw;
  // outline: 1px solid black;
  display: inline-flex;
  justify-content: space-between;

  .add {
    margin: 10px auto;
    width: 75px;
    height: 45px;
    border: 0;
    border-radius: 5px;
    color: white;
    background-color: rgb(86, 115, 196);
  }

  .add:hover {
    background-color: rgb(112, 136, 201);
  }

  .search {
    margin-top: 10px;
    height: 45px;
    display: flex;
    justify-content: space-around;
    width: 300px;
    // outline: 1px solid black;

    input {
      margin-top: 5px;
      width: 200px;
      height: 35px;
      border: 1px solid #cdcfd4;
      border-radius: 3px;
    }

    button {
      width: 75px;
      height: 45px;
      border: 0;
      border-radius: 5px;
      color: white;
      background-color: rgb(86, 115, 196);
    }

    button:hover {
      background-color: rgb(112, 136, 201);
    }
  }

}
</style>